<template>
  <div class="bottomNav">
    <a
      v-for="item in List"
      :key="item.path"
      :href="item.path"
      :class="{active:item.path == activing}"
    >
      <i
        :style="{background:'url('+(item.path == activing?item.icon2:item.icon)+') no-repeat',backgroundSize:'cover'}"
      ></i>
      {{ item.title }}
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [
        {
          title: "首页",
          path: "/home",
          icon: require("@/assets/img/index01.png"),
          icon2: require("@/assets/img/index02.png")
        },
        {
          title: "分类",
          path: "/list",
          icon: require("@/assets/img/list01.png"),
          icon2: require("@/assets/img/list02.png")
        },
        {
          title: "订单",
          path: "/cart",
          icon: require("@/assets/img/cart01.png"),
          icon2: require("@/assets/img/cart02.png")
        },
        {
          title: "个人中心",
          path: "/my",
          icon: require("@/assets/img/my01.png"),
          icon2: require("@/assets/img/my02.png")
        }
      ],
      activing: ""
    };
  },

  components: {},

  methods: {},
  created() {
    this.activing = this.$route.path;
  }
};
</script>

<style scoped>
body {
  background: #f4f4f4;
}
.bottomNav {
  width: 100%;
  height: 0.4rem;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  background: #fff;
  z-index: 100;
}
a {
  display: inline-block;
  width: 25%;
  height: 0.4rem;
  line-height: 0.2rem;
  font-size: 11px;
  color: #8d8a8a;
}
i {
  display: block;
  width: 0.26rem;
  height: 0.18rem;
  margin: 0 auto;
  margin-top: 0.05rem;
}
.active {
  color: #11b57c !important;
}
</style>
<style >
.bottomNav {
  border-top: 0.01rem solid #f3f3f3;
}
</style>